<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>我的勋章 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #3b82f6;
            --secondary: #8b5cf6;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --text-tertiary: #94a3b8;
            --bg-light: #f1f5f9;
            --bg-white: #ffffff;
            --border-light: #e2e8f0;
            --radius: 12px;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--primary);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
            color: white;
            text-align: center;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: white;
            font-size: 20px;
        }
        
        /* 勋章统计卡片 */
        .badge-stats-card {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            padding: 16px;
            margin: 16px;
            box-shadow: var(--shadow);
            display: flex;
            justify-content: space-around;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 4px;
        }
        
        .stat-label {
            font-size: 13px;
            color: var(--text-secondary);
        }
        
        /* 通用区块样式 */
        .section {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            margin: 0 16px 16px;
            overflow: hidden;
            box-shadow: var(--shadow);
        }
        
        .section-header {
            padding: 16px;
            border-bottom: 1px solid var(--border-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .section-title {
            font-size: 17px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .section-more {
            font-size: 13px;
            color: var(--text-tertiary);
            text-decoration: none;
        }
        
        /* 勋章网格样式 */
        .badge-grid {
            padding: 16px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        
        .badge-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
        }
        
        .badge-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            margin-bottom: 8px;
            position: relative;
            transition: transform 0.3s ease;
        }
        
        .badge-item:hover .badge-icon {
            transform: scale(1.05);
        }
        
        .badge-unlocked {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }
        
        .badge-locked {
            background-color: var(--bg-light);
            color: var(--text-tertiary);
        }
        
        .badge-name {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            width: 100%;
        }
        
        .badge-locked .badge-name {
            color: var(--text-tertiary);
        }
        
        .badge-level {
            position: absolute;
            bottom: 55px;
            right: 0;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: var(--success);
            color: white;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        
        /* 勋章列表样式 */
        .badge-list {
            padding: 8px 0;
        }
        
        .badge-list-item {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--border-light);
        }
        
        .badge-list-item:last-child {
            border-bottom: none;
        }
        
        .list-badge-icon {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-right: 16px;
        }
        
        .badge-details {
            flex: 1;
        }
        
        .badge-list-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 4px;
        }
        
        .badge-desc {
            font-size: 13px;
            color: var(--text-tertiary);
            margin-bottom: 4px;
        }
        
        .badge-progress {
            height: 6px;
            background-color: var(--bg-light);
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background-color: var(--primary);
        }
        
        .badge-action {
            font-size: 13px;
            color: var(--primary);
            font-weight: 500;
        }
        
        .badge-locked-action {
            color: var(--text-tertiary);
        }
        
        /* 勋章成就时间线 */
        .achievement-timeline {
            padding: 16px;
        }
        
        .timeline-item {
            position: relative;
            padding-left: 40px;
            padding-bottom: 24px;
        }
        
        .timeline-item:last-child {
            padding-bottom: 0;
        }
        
        .timeline-item::before {
            content: '';
            position: absolute;
            left: 13px;
            top: 30px;
            bottom: -12px;
            width: 2px;
            background-color: var(--border-light);
        }
        
        .timeline-item:last-child::before {
            display: none;
        }
        
        .timeline-dot {
            position: absolute;
            left: 6px;
            top: 12px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: var(--success);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 10px;
        }
        
        .timeline-content {
            background-color: var(--bg-light);
            border-radius: var(--radius);
            padding: 12px;
        }
        
        .timeline-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .timeline-title {
            font-size: 15px;
            font-weight: 600;
        }
        
        .timeline-date {
            font-size: 12px;
            color: var(--text-tertiary);
        }
        
        .timeline-badges {
            display: flex;
            gap: 10px;
        }
        
        .timeline-badge {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            font-size: 11px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 20px;
        }
        
        /* 勋章详情弹窗 */
        .badge-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
        }
        
        .badge-modal.active {
            display: flex;
        }
        
        .modal-content {
            background-color: white;
            border-radius: var(--radius);
            width: 88%;
            max-width: 320px;
            overflow: hidden;
            animation: popIn 0.3s ease;
        }
        
        @keyframes popIn {
            0% { transform: scale(0.9); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .modal-header {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .modal-badge-icon {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            margin: 0 auto 12px;
            border: 3px solid rgba(255, 255, 255, 0.3);
        }
        
        .modal-badge-name {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 4px;
        }
        
        .modal-badge-rarity {
            font-size: 13px;
            opacity: 0.9;
        }
        
        .modal-body {
            padding: 20px;
        }
        
        .badge-description {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 16px;
            line-height: 1.5;
        }
        
        .badge-how-to {
            margin-bottom: 16px;
        }
        
        .how-to-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .how-to-list {
            font-size: 13px;
            color: var(--text-secondary);
            padding-left: 20px;
        }
        
        .how-to-list li {
            margin-bottom: 6px;
        }
        
        .modal-footer {
            padding: 0 20px 20px;
        }
        
        .modal-btn {
            width: 100%;
            padding: 10px 0;
            border-radius: 24px;
            font-weight: 600;
            font-size: 15px;
            border: none;
            background-color: var(--primary);
            color: white;
        }
        
        .modal-btn-locked {
            background-color: var(--bg-light);
            color: var(--text-tertiary);
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            z-index: 9999;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">我的勋章</div>
        <button class="nav-btn" id="badgeHelpBtn">
            <i class="fas fa-question-circle"></i>
        </button>
    </div>
    
    <!-- 勋章统计卡片 -->
    <div class="badge-stats-card">
        <div class="stat-item">
            <div class="stat-value">18</div>
            <div class="stat-label">已获得</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">42</div>
            <div class="stat-label">总计勋章</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">3</div>
            <div class="stat-label">稀有勋章</div>
        </div>
    </div>
    
    <!-- 已获得勋章 - 网格样式 -->
    <div class="section">
        <div class="section-header">
            <div class="section-title">
                <i class="fas fa-trophy" style="color: var(--warning);"></i>
                已获得勋章
            </div>
            <a href="#" class="section-more">查看全部</a>
        </div>
        <div class="badge-grid">
            <div class="badge-item" data-badge="explorer">
                <div class="badge-icon badge-unlocked">
                    <i class="fas fa-compass"></i>
                </div>
                <div class="badge-level">3</div>
                <div class="badge-name">探索先锋</div>
            </div>
            <div class="badge-item" data-badge="social">
                <div class="badge-icon badge-unlocked">
                    <i class="fas fa-users"></i>
                </div>
                <div class="badge-level">2</div>
                <div class="badge-name">社交达人</div>
            </div>
            <div class="badge-item" data-badge="creative">
                <div class="badge-icon badge-unlocked">
                    <i class="fas fa-paint-brush"></i>
                </div>
                <div class="badge-level">1</div>
                <div class="badge-name">创作能手</div>
            </div>
            <div class="badge-item" data-badge="loyal">
                <div class="badge-icon badge-unlocked">
                    <i class="fas fa-calendar-check"></i>
                </div>
                <div class="badge-level">5</div>
                <div class="badge-name">忠诚用户</div>
            </div>
            <div class="badge-item" data-badge="comment">
                <div class="badge-icon badge-unlocked">
                    <i class="fas fa-comment"></i>
                </div>
                <div class="badge-level">2</div>
                <div class="badge-name">评论专家</div>
            </div>
            <div class="badge-item" data-badge="popular">
                <div class="badge-icon badge-unlocked">
                    <i class="fas fa-star"></i>
                </div>
                <div class="badge-level">1</div>
                <div class="badge-name">人气王</div>
            </div>
        </div>
    </div>
    
    <!-- 勋章进度 - 列表样式 -->
    <div class="section">
        <div class="section-header">
            <div class="section-title">
                <i class="fas fa-hourglass-half" style="color: var(--primary);"></i>
                进行中勋章
            </div>
        </div>
        <div class="badge-list">
            <div class="badge-list-item">
                <div class="list-badge-icon badge-locked">
                    <i class="fas fa-rocket"></i>
                </div>
                <div class="badge-details">
                    <div class="badge-list-title">分享大师</div>
                    <div class="badge-desc">累计分享内容100次（当前78/100）</div>
                    <div class="badge-progress">
                        <div class="progress-fill" style="width: 78%;"></div>
                    </div>
                </div>
                <span class="badge-action">进行中</span>
            </div>
            <div class="badge-list-item">
                <div class="list-badge-icon badge-locked">
                    <i class="fas fa-lightbulb"></i>
                </div>
                <div class="badge-details">
                    <div class="badge-list-title">灵感迸发</div>
                    <div class="badge-desc">发布20篇原创内容（当前12/20）</div>
                    <div class="badge-progress">
                        <div class="progress-fill" style="width: 60%;"></div>
                    </div>
                </div>
                <span class="badge-action">进行中</span>
            </div>
            <div class="badge-list-item">
                <div class="list-badge-icon badge-locked">
                    <i class="fas fa-hand-holding-heart"></i>
                </div>
                <div class="badge-details">
                    <div class="badge-list-title">爱心大使</div>
                    <div class="badge-desc">帮助10位新用户熟悉平台（当前3/10）</div>
                    <div class="badge-progress">
                        <div class="progress-fill" style="width: 30%;"></div>
                    </div>
                </div>
                <span class="badge-action">进行中</span>
            </div>
        </div>
    </div>
    
    <!-- 未解锁勋章 -->
    <div class="section">
        <div class="section-header">
            <div class="section-title">
                <i class="fas fa-lock" style="color: var(--text-tertiary);"></i>
                未解锁勋章
            </div>
            <a href="#" class="section-more">查看全部</a>
        </div>
        <div class="badge-grid">
            <div class="badge-item">
                <div class="badge-icon badge-locked">
                    <i class="fas fa-crown"></i>
                </div>
                <div class="badge-name">至尊会员</div>
            </div>
            <div class="badge-item">
                <div class="badge-icon badge-locked">
                    <i class="fas fa-globe"></i>
                </div>
                <div class="badge-name">环球旅行者</div>
            </div>
            <div class="badge-item">
                <div class="badge-icon badge-locked">
                    <i class="fas fa-music"></i>
                </div>
                <div class="badge-name">音乐达人</div>
            </div>
            <div class="badge-item">
                <div class="badge-icon badge-locked">
                    <i class="fas fa-camera"></i>
                </div>
                <div class="badge-name">摄影大师</div>
            </div>
            <div class="badge-item">
                <div class="badge-icon badge-locked">
                    <i class="fas fa-book"></i>
                </div>
                <div class="badge-name">阅读爱好者</div>
            </div>
            <div class="badge-item">
                <div class="badge-icon badge-locked">
                    <i class="fas fa-gamepad"></i>
                </div>
                <div class="badge-name">游戏大神</div>
            </div>
        </div>
    </div>
    
    <!-- 勋章成就时间线 -->
    <div class="section">
        <div class="section-header">
            <div class="section-title">
                <i class="fas fa-history" style="color: var(--secondary);"></i>
                获得记录
            </div>
        </div>
        <div class="achievement-timeline">
            <div class="timeline-item">
                <div class="timeline-dot">
                    <i class="fas fa-check"></i>
                </div>
                <div class="timeline-content">
                    <div class="timeline-header">
                        <div class="timeline-title">获得新勋章</div>
                        <div class="timeline-date">今天</div>
                    </div>
                    <div class="timeline-badges">
                        <div class="timeline-badge">
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                    <div class="badge-desc">恭喜获得"人气王"勋章，您的内容获得了1000+点赞</div>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-dot">
                    <i class="fas fa-check"></i>
                </div>
                <div class="timeline-content">
                    <div class="timeline-header">
                        <div class="timeline-title">勋章升级</div>
                        <div class="timeline-date">3天前</div>
                    </div>
                    <div class="timeline-badges">
                        <div class="timeline-badge">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                    </div>
                    <div class="badge-desc">"忠诚用户"勋章升级至Lv.5，感谢您的持续支持</div>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-dot">
                    <i class="fas fa-check"></i>
                </div>
                <div class="timeline-content">
                    <div class="timeline-header">
                        <div class="timeline-title">获得新勋章</div>
                        <div class="timeline-date">1周前</div>
                    </div>
                    <div class="timeline-badges">
                        <div class="timeline-badge">
                            <i class="fas fa-comment"></i>
                        </div>
                    </div>
                    <div class="badge-desc">恭喜获得"评论专家"勋章，您发表了500+优质评论</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass nav-icon"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-award nav-icon"></i>
            <span>勋章</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 勋章详情弹窗 -->
    <div class="badge-modal" id="badgeModal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-badge-icon">
                    <i class="fas fa-compass"></i>
                </div>
                <div class="modal-badge-name">探索先锋</div>
                <div class="modal-badge-rarity">稀有度：史诗 · Lv.3</div>
            </div>
            <div class="modal-body">
                <div class="badge-description">
                    表彰在平台上积极探索各类内容的用户。解锁更多探索成就，提升勋章等级。
                </div>
                <div class="badge-how-to">
                    <div class="how-to-title">如何提升等级：</div>
                    <ul class="how-to-list">
                        <li>浏览不同类别的内容</li>
                        <li>发现并关注新的创作者</li>
                        <li>参与平台探索活动</li>
                        <li>收藏优质内容并分类整理</li>
                    </ul>
                </div>
                <div class="badge-how-to">
                    <div class="how-to-title">等级特权：</div>
                    <ul class="how-to-list">
                        <li>Lv.2：获得内容推荐优先体验</li>
                        <li>Lv.3：解锁高级搜索功能</li>
                        <li>Lv.5：获得专属内容推送</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button class="modal-btn" id="closeModal">分享勋章</button>
            </div>
        </div>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById('backBtn');
        const badgeHelpBtn = document.getElementById('badgeHelpBtn');
        const badgeItems = document.querySelectorAll('.badge-item');
        const badgeModal = document.getElementById('badgeModal');
        const closeModal = document.getElementById('closeModal');
        const toast = document.getElementById('toast');
        
        // 勋章数据
        const badgeData = {
            explorer: {
                icon: 'compass',
                name: '探索先锋',
                rarity: '稀有度：史诗 · Lv.3',
                description: '表彰在平台上积极探索各类内容的用户。解锁更多探索成就，提升勋章等级。',
                howTo: [
                    '浏览不同类别的内容',
                    '发现并关注新的创作者',
                    '参与平台探索活动',
                    '收藏优质内容并分类整理'
                ],
                privileges: [
                    'Lv.2：获得内容推荐优先体验',
                    'Lv.3：解锁高级搜索功能',
                    'Lv.5：获得专属内容推送'
                ],
                action: '分享勋章'
            },
            social: {
                icon: 'users',
                name: '社交达人',
                rarity: '稀有度：稀有 · Lv.2',
                description: '表彰在平台上积极社交互动的用户。与更多用户建立连接，提升勋章等级。',
                howTo: [
                    '积极参与社区讨论',
                    '与其他用户互动交流',
                    '加入兴趣社群并活跃发言',
                    '组织线上活动'
                ],
                privileges: [
                    'Lv.1：每日额外互动次数',
                    'Lv.2：创建社群权限',
                    'Lv.4：社群置顶权限'
                ],
                action: '分享勋章'
            },
            creative: {
                icon: 'paint-brush',
                name: '创作能手',
                rarity: '稀有度：普通 · Lv.1',
                description: '表彰在平台上积极创作内容的用户。持续创作优质内容，提升勋章等级。',
                howTo: [
                    '发布原创内容',
                    '获得用户点赞和收藏',
                    '参与创作挑战活动',
                    '内容被官方推荐'
                ],
                privileges: [
                    'Lv.1：高清图片上传',
                    'Lv.3：长文编辑工具',
                    'Lv.5：原创保护机制'
                ],
                action: '分享勋章'
            }
        };
        
        // 显示提示消息
        function showToast(message) {
            toast.textContent = message;
            toast.classList.add('show');
            
            clearTimeout(toast.timeout);
            toast.timeout = setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }
        
        // 更新勋章弹窗内容
        function updateBadgeModal(badgeId) {
            const badge = badgeData[badgeId];
            if (!badge) return;
            
            const modalIcon = document.querySelector('.modal-badge-icon i');
            const modalName = document.querySelector('.modal-badge-name');
            const modalRarity = document.querySelector('.modal-badge-rarity');
            const modalDescription = document.querySelector('.badge-description');
            const howToList = document.querySelector('.how-to-list');
            const privilegesList = document.querySelector('.how-to-list:last-of-type');
            const modalBtn = document.querySelector('.modal-btn');
            
            // 更新图标
            modalIcon.className = `fas fa-${badge.icon}`;
            
            // 更新文本内容
            modalName.textContent = badge.name;
            modalRarity.textContent = badge.rarity;
            modalDescription.textContent = badge.description;
            modalBtn.textContent = badge.action;
            
            // 更新如何提升列表
            howToList.innerHTML = '';
            badge.howTo.forEach(item => {
                const li = document.createElement('li');
                li.textContent = item;
                howToList.appendChild(li);
            });
            
            // 更新特权列表
            privilegesList.innerHTML = '';
            badge.privileges.forEach(item => {
                const li = document.createElement('li');
                li.textContent = item;
                privilegesList.appendChild(li);
            });
        }
        
        // 绑定事件
        function bindEvents() {
            // 返回按钮
            backBtn.addEventListener('click', () => {
                history.back();
                showToast('返回上一页');
            });
            
            // 帮助按钮
            badgeHelpBtn.addEventListener('click', () => {
                showToast('勋章系统说明');
            });
            
            // 勋章点击事件
            badgeItems.forEach(item => {
                item.addEventListener('click', function() {
                    const badgeId = this.getAttribute('data-badge');
                    if (badgeId) {
                        updateBadgeModal(badgeId);
                        badgeModal.classList.add('active');
                    } else {
                        showToast('完成特定任务即可解锁此勋章');
                    }
                });
            });
            
            // 关闭弹窗
            closeModal.addEventListener('click', function() {
                badgeModal.classList.remove('active');
                showToast(this.textContent);
            });
        }
        
        // 初始化
        function init() {
            bindEvents();
        }
        
        // 启动
        init();
    </script>
</body>
</html>